<template>
      <div class="enter-y-r">
           <Cards>
               <template #title>
                    <div class="titles">
                        <div>前端组</div>  
                        <div>
                            <div>
                            <el-button @click="importFns" type="primary" size="small" plain>
                                        导出<el-icon class="el-icon--right"><Upload /></el-icon>
                            </el-button>
                        </div>
                        <div>
                            <el-button type="primary" size="small" plain disabled="">
                                        导入<el-icon class="el-icon--right"><Upload /></el-icon>
                            </el-button>
                        </div> 
                        </div>
                    </div>  
               </template>
               <template #body>
                  <ExcelTables 
                  ref="exceltbale" 
                  :usersGroup="['大能啊','达文西','锁子哥']" 
                  GroupName="前端组"
                  company="北京xxx公司"
                  :Headers="['负责人','工作描述','任务模块','开始时间','预计完成时间','进度状态']"
                  ></ExcelTables>
               </template>
           </Cards>
      </div>
      <el-dialog
      v-model="dialogVisible"
      title="导出"
      width="30%" 
   >
      <span>
           <el-input v-model="namevalue" placeholder="请输入导出名称"></el-input>
           <p class="text-dark-50 text-xs my-2">目前仅支持Excel格式,如果下载之后无法打开请借助WPS打开！！！</p>
      </span>
      <template #footer>
         <span class="dialog-footer">
         <el-button @click="handleClose">取消</el-button>
         <el-button type="primary" @click="SaveFns" :disabled="isdisable"
            >导出</el-button
         >
         </span>
      </template>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
 import ExcelTables from './components/excelTable.vue';
 import Cards from '@/components/Cards.vue'; 
 import {ref,watch} from 'vue' 
 let exceltbale = ref(null);
// 穿透->导出
 const importFns = ()=>{
    dialogVisible.value = true; 
 }
 const namevalue = ref<string>('');
 const isdisable = ref<Boolean>(true);
// 监听名称是否合法
 watch(()=>namevalue.value,()=>{
    if(namevalue.value.length>3){
        isdisable.value=false;
    }else{
        isdisable.value=true;
    }
    
 })
// 弹窗
const dialogVisible = ref<Boolean>(false); 
// 保存 
const SaveFns = ()=>{
     if(namevalue.value?.length<1){
         return false;
     }
    dialogVisible.value = false;
    exceltbale.value?.ImportList(namevalue.value);
} 
// 关闭弹窗
const handleClose = ()=>{
    dialogVisible.value = false;
} 
 </script>
 
 <style lang="scss" scoped>
 .titles{ 
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     &>div:nth-of-type(2){
          display: flex;
          &>div{
             margin: 0 .2rem;
          }
     }
 }
 </style>